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r" 



Introduction 

-The continuous quick development in the Information Technology & 
communications field on the educational process requires developing types 
to cope with such continuous technological development. 


-This forced us to adopt new educational entries that aims to achieve goals, 
philosophy and vision which the computer subject and Information 
Technology document guarantees, it reflects criteria and indicators of the 
subject to the second secondary which has been prepared in the frame of the 
scope sequence matrix on different stages and classes. 


The curriculum aims to developing self-learning skills, electronic, 
cooperative, and thinking skills and it's all types, this through students 
cooperation in doing projects for designing and creating active website 
(Photographic Terms Dictionary) 


The idea of the project relies on creating a model form to be followed as a 
program to design its pages, by using Web Expression application and the 
HTML code. It includes data bases that have been created by using Mysql 
program. 


-These data basis are used by prepared codes, and have been written by php 
programing language an open source language, you can copy and use it for 
creating the website pages, besides understanding and developing any code 
you would like to do it. 


-Also the book includes photos of the applications interface of the project to 
clarify all the steps, to simplify the concepts to the learners, this through 
activities and exercises that are in the workbook. 


- Finally this book is concerned with developing the skills of varied 
thinking, everyday skills and the special skills by using Information 
technology and communications to learners, through doing projects they can 
get chances to use what 

They study in their practical life. 


Good Luck 


V. 
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Activity 1 

Designing search for term page (Search _term .php). 

7 

Exercise 1 

The suggestion for designing search for term page. 

11 

Exercise 2 

Set a vision for designing deleting term page. 

13 

Activity 2 

Creating deleting term page "Del_term.php. 

15 

Activity 3 

Creating "updating term data" edit _term.php. 

20 

Exercise 3 

The evaluation of how much we need the Help page 
"help.php". 

26 

Activity 4 

Creating help page. 

28 

Unit 5: Securing The web site 

Activity 1 

Searching for the penetration types of websites and 

ways of protection from it. 

32 

Exercise 1 

Choose the scientific term that explains every 

expression 

34 

Activity 2 

Discover the difference between using Get and Post 
when creating data form. 

35 

Activity 3 

Doing PHP code on the server to be sure of the 
correct inputs. 

40 

Activity 4 

Encrypting data. 

43 

Activity 5 

Doing code PHP and the results of the search on the 

internet. 
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Exercise2 

Studying code, it is about registering a new user. 

50 

Exercise 3 

Explaining security codes. 

52 

Exercise 4 

Searching for the types of writing password. 
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Unit 4 

Dealing with the Website Data 

By the end of the unit, it is expected that the 
student will be able to: 

1. Creating page searching for term. 

2. Explaining PHP code which is about executing search for term 
page. 

3. Follow the steps of searching for term in the data base. 

4. Creating deleting term page. 

5. Know the parts of PHP code which is concerned with executing 
deleting term page. 

6. Executing deleting term process from data base. 

7. Creating the page of editing the data of a term by using PHP& 
HTML code. 

8. Executing the process of editing the data of a term in the data 
base. 

9. Conclude the steps of creating help. 

10. Cooperate with classmates in executing the unit activities. 


i J 
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Title: Designing search for term page (Search _term .php) 


under your teacher supervision design a search for term page "Search 
_term.php" The aim is to search for a term that have been saved before 
_ in the database and performing it on the web j)age _ 

The activity steps: 

(1) use the available application and it could be Expression Web in 
creating Search for term page so it appears as in the following screen: 
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( 2 ) Study the following code : 


1 <html dir="rtT> 

2 <head> 

3 <meta content="text;'htnil, charset=utf-8" http-equiv-' Content-Type" > 

4 <title>^" CP 

5 </head> 

6 <body> 

7 



Add code no 




<p elas s= 11 style 1 ' 'Xspan laiig="ar-eg M ><strong>^ 3 ^ CP d^</ strongx/ spanx/p> 

<form method- ’post" action= ' 1 seaicli_term.php "> 

<div > 

<input name- 'txtsearch" type="text" style-'width: 332px; height: 25px;" > 

<input name- ’submitl" type- 'submit" value= T '^lW style-'height: 26px" >&nbsp;<br xbr> 
</form> 

<br> 

<table style-width: 100%' border="r> 

<tr> 

<td> </td> Add code no.2 

<td> </td> 

<td> </td> 

<td> </td> 

</tr> 

< table> 

</div> 


8 
9 
10 
11 
12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 </body> 

27 </html> 
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(3) The previous code is written automatically as soon as we put 
the controls on the search page. 

Discuss it with your classmates and teacher, record 
your notes. 




V. 


j 


9 

























10 

















11 













Dealing with the website data 


f 


A 



Title: the suggestion for designing search for term page 

/■ 

Suggest a design to search for term page "Search _term. php" and 
execute it by using Expression Web then add php code that's required. 
It's for searching for term in the database then show its data on the web 

i 

\ page. 

Under your teacher supervision execute the following activity: 

(1) Use the available application and it could be Expression 
Web, it is for creating search for term page it is called " 
search _term. php" Record the steps 



V 


V. 
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Activity (2) 


Title: Creating deleting term page "Del_term.php. 

! Cooperate with your classmates and under your teacher supervision 
follow the following steps for creating deleting term page. 

"Del_term.php" 


• You can use the following screen in inserting code PHP in the 
selected places on code html that's concerned with delete 
term page by using Expression Web applications. 




Line 24, Column 2 


| fc- i>- IE8 | ■' g- CSS2.1 832x178- 

7 e ^ mammw 


EN ” IP; *7] ,(,) 11:32 ^ 

|x T-io/.i/rr 
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Study the previous screen and discuss it with your teacher in the places 

of inserting code php 


. _ 


Executing the activity: 

• In the selected place (1), add the first part of the code & it is : 

<?php 

includef 1 ' header .php 1 ') ; 

include( 1 ' connection .php 1 ') ; 

mys qlquery (" SET NAMES ’utfS"'); 

$sql=" select * from terms"; 

$ query =mys ql_query ($ s ql); 

$num=mys qlnumro ws ($ query 7 ); 

?> 


• in the selected place (2), add the second part of the code & it is : 



• in the selected place (3), add the third part of the code & it is : 
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<?php 

while($row = mvsql_fetch_array($querv)) 

{ 

$id=$row[’id ! ]; 

$term=$row[ , term’]; 

$trans=$row['trans 1 ]; 

$defe=$row[ ! defe']; 

$picture=$row['pkture’]; 

echo (" 

<tr> 

<td>$id</td> 

<td>$term</td> 

<td>$trans</td> 

<td>$defe</td> 

<tdxinput name=’termp’ type='image' src='$picture' width-80 1 height-SO’ /x/td> 
<tdxa href= , del_term.php?id=$id , > </ax/td> 

</tr> 

} 

7 > 


in the selected place (4), add the fourth part of the code & it is • 

<?php 

if(is s et($_GET [’id' ])) 

{ 

Jsqldel- ' delete from terns where id—$_GET[id]"'; 

$ query =mys ql_query ($ s qldel) ; 
he ader ("L o c ation: D el_T erm .php 1 ') ; 
exit; 

} 

?> 


• Now test executing the page by uploading it in the internet web 
browser by writing the title: 


localhost/dictionary/del_term.php 


i j 
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Follow on Activity 2 to be sure of deleting term from the 


database the following screen appears: 


| i 11 n lOTMlj 



Click on the hyperlink "delete" in the line of one of the terms and that's 
referred to on the previous screen what do you observe? Record your 
Notes. 
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Activity 3 

_ / 

Title: creating " updating term data" edit _term.php 

% \ 

i You have two screens the first one for the suggested design to the 
interface update term page 'edit_term.php, the second one the screen of 
html code of the same page. Which is written automatically as soon as 
we put the controls on the page in the designing pattern, it appears 
when pressing on split 
The task: 

Use the two screens that are shown to create update the data of term 
page, under you teacher supervision 

l- Study the suggested screen design and the code screen that's 
concerned with the page. 































Dealing with the website data 


2 - Study the following screen, discuss it with your teacher and classmates 


1 <html dir="rtL"> 

2 <head> 

3 <meta c ontent= 1 'text/html; charseHitf-8" http-equiv- 'Content-Type 1 ' > 

<title> </title> 

5 </head> 

6 <body> 

7<!- php code number 1 ■■> 

8 <hlxp > Jjai </p> </hi> 

9<!- php code number 2 ■■> 

10 <formmethod="post" action=" edit term,php "> 


11 <! 
12 

13 

14 

15 

16 

17 

18 

19 

20 

21 <! 
22 



PHP code no 3 




PHP code no 4 


PHP code no 5 




php code number 3 --> 

<table style-'width: 100%”> 

<trbgcoloF'ff3Ff]ED0'> 

<td>gllwrf3l</td> 

<td>^aj3l'</td> 

<td>*ij*2i</td> 

<td>Sji«ilk/td> 

</tr> 

php code number 4 ■■> 

</table> 

23 <!-- php code number 5 --> 

24 </form> 

25 <form method='post'action- edit term.php?id=$ GETfid]&amp;action=$ GET[action1 ' enctype=' , multipait , form-data"> 

26 <hr style='color:oraiise:maroon:uidth:1267px’/> 

27 <h2x%J^«h2> 

28 <hr style- colormranee:maroon;width: 1267px'> 

29 <div> 

30 <!■■ php code number 6 ■■> 

31 

32 <!-- php code number 7 ■■> 

33 

34 </div> 

35 </form> 

36 </body> 

37 </html> 



the places where you insert php code. 


V. 
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3- use the following code in the selected places in the previous code , and 
take care of the following: 

• the first part ; it refers to number (1) to the place of adding the 
code after <Body> 

<?php 

included'' header .pirp 

7 > 

• The second part , it refers to number (2) to the place of adding 

code before <Body> 

<?php 

include C" c oirne ction, plip 
mysql_query( T 'SET NAMES 
$sql=" select * from terms"; 

$ query =mys ql_query ($ s ql); 

$num=my s qlnumrows ($ query); 

7 > 

• the third part: it refers to number {3) to the place of adding code 

after <form> 

<?php 

echo(' , <hl>'^ 1 - 3 Ik^aJi $num </hl>"); 

?> 

• the fourth part ; it refers to the place of adding code before 
closing the table </table> 

<?php 

while($row = mysql fetch array (Squery)) 

{ 

$id=$row[ , id’]; 

$tenn=$ro w ['term' ] ; 

Straus =$r o w ['trans" ] ; 

$ defe=$row [' defe' ] ; 

Spicture =$r o w ['picture" ] ; 
echo ( Tl 
<tr > 

<td>$id</td> 

<td>$term</td> 

<td>$trans</td> 

-t d $ d e fe-t d 

<td> input name= , temip" type— image' src— Spicture’ widtli= , 80 ’ height =, 80 ' /x/td> 
<td> <a href='update_term.php?id=$id’>dj^</a> </td> 

</tr> 

} 


c J 
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The fifth part refers to number (5) to the place of adding the code 

after closing the table. 


<?php 

if(is s et($_GE T ['id' ])) 

{ 

$sql- 'select * from terms where id—$_GET[id]'"; 
$query=mysql_query($sql); 

$ro w=my s ql_fetch_arr ay ($ query) ; 

$id=$row['id']; 

$term=$r o w [’term' ] ; 

$trans=$row[ , trans , ]; 

$defe=$row[' defe' ] ; 

$picture=$row[ , picture']; 

?> 




• The sixth part : it refers to number (6) to the place of adding the 

code before closing </form> 

<?php 

echo(" 

<br /> 

<input name='iddata' type- hidden 1 style- width: 482px’ value= , $id' t> 
^a^l&nbsp;& n bsp;&nbsp; 

<input name- txt_term' type='text' style ='width: 482px" value= , $term l /> <br /> 

<br /> 

>>&nbsp;&nbsp;&nbsp; 

<input name='trans' type='text l style =, wddth: 482px’ value- $trans' /> <br l> 

<br /> 

^>>&nbsp;&nbsp;&nbsp; 

<textarea name- TextAreal' style- width: 480px; height: 30px’ >$defe</textarea> <br /> 

<br f> 

tjj-alil&nbsp;&nbsp; 

<input name- temp’ type='image' src- Spicture' width='80’ height=’80' t> 

<input name- pic’ type= , hidden , style ='width: 482px’ value- Spicture' /> 

<input name- filedata’ type- file’ maxlength=’43 , > 

<br /xbr /xbr /xbr F> 

<input name- Subimt2' style='width: 76px' type- submit’ value /xbr f> 

<br /> 


j 
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5~ Click on the link of updating in front of term page and record your notes, 
discuss it with your classmates and teacher : 
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Exercise (3) 




Title: The evaluation of how much we need the Help page "help.php" 


Use the skills and knowledge you gained in creating the website pages, 
your skills in searching through the internet and dealing with the 
electronic information that are available in studying the available help 
_ page in some sites^ Record you r notes_. _ 

The task: 

Under your teacher supervision do the following exercise: 


(1) the purpose of help page is : 



(2) Describe the contents of help page: 



V. 
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Title: "Creating Help page 


It's available in most web sites a help link for the users of the site. It 
supplies them with specific information and guides them of how to deal 
with the site pages. 

The task: 

Under your teacher supervision create a help page to your site: 

(1) Use one of the applications of creating web pages and it could be 
Expression web in creating help page it's called "Help.php , so it looks 
as the following screen 



(2) Record the steps of designing the previous page. 



V. 
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The Help page, is written only in it just the title " Help" 

(3) Copy the suitable PHP code that is concerned with header.php in the 
suitable place, write the code 


(4) Put the contents of the page to the referred place on the 
previous screen, record the Steps. 


(5) Save the Web page in the web folder, record the steps. 


(6) Does this page need a/ link with/ connection to the data base (yes/No) 
Say why? 
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Unit 5 

Securing the web site of "The computer 
Photographic Dictionary of terms" 

By the end of the unit, it is expected that the student 
will be able to: 

1 - Recognize some concepts & special terms concerning securing websites. 

2- Create registration page of a new user. 

3- Create sign in php and sign out php registration page. 

4- Design an electronic mean to spread the awareness of the secure usage of the 
internet. 

5- Discuss some concepts and some issues concerning safe thinking safe 
information when using communication and information technology. 

6- Following and respecting the ethics and principles of free thinking when 
dealing with information, equipment, nets, service and application of the web. 

7- Keep the ethics and principles of law when using information equipment and 
nets. 

8- Keep the ethics and principles of law when using information equipment and 
nets. 


i j\ 
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9- Follow the ways of protecting websites, the database from risks that might 
face them. 

10- Document information that he gets from electronic information resources. 


i j\ 
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Activity (1) 


Title: Searching for the penetration types of websites and ways of protection 
from it. 

-Under the supervision of your teacher do the following activity 

Use some of the internet browsers in searching for" the types and ways of 
penetrating websites". And the best ways for avoiding it “then write a report 
about the most important points you get. 

1) Ways and types of internet web sites penetration: 



2 ) summary about ways of avoiding it 
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Write briefly recommendations and suggestions and record the results of 
discussion with your teacher and classmates. 
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Exercise (1) 


Choose the scientific term that explains every expression: 

- SQL Injection - SSL (Secure Sockets Layer) - OpenVAS 
MD5 - XSS ( Cross Site scripting ) 


1- inserting penetrator to the java script code in the comment page and when 
sending the comment to the server this code is stored in the database when 
it is shown in html page , this code is done and redirected to another page 
with a bad content or a fishing page . 

( . ) 


2- It is considered one of the most used applications which are open source for 
testing securing website. 

( . ) 

3- A protocol for supporting the safe dealing between web server and web 
browser through a coordinator called CA certificate Authority. 

( . ) 

4- The penetrator inserted SQL statement instead of inserting the user name 
aiming to doing unwanted changes in database table. 

( . ) 

5- One of types of encrypting data that are available in PHP language. 

( . ) 
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Activity (2) 



Title: Discover the difference between using Get and Post when creating data 
form. 


Steps of doing the activity: 

- Open the registration page of a new user in reg.php through the expression 
web. 
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- One of the form characteristics which referred to in the previous screen 
change the value of the Method to GET in the following figure: 


Tag Properties * CSS Properties 

# x 

01 » 



\B Attributes ^ _ 

action 

reg.php 

method 

post 

jjp acceptcharset 


accesskey 


^ atomicselection 





Save reg.php. 

— Through the browser web upload reg.php page, it is by writing the 
address http://localhost/terms/reg.php 

Fill in the following form. 



- Click on the registration button. 

- Notice the URL address in the address label. 


£ http://localhost/terms/reg.php?txt_u5er=ahmed&txt_pass=moon&txt_con=moon&Submitl=%D8%AA%D8%B3%D8^oA^ 



37 














































iring web" the computer 
photographic dictionary of terms " 


Record your notes; 


Have you noticed that? 

All the data of the form is clear in the title URL through http request and the 
numbers refers to the following: 


No. 

controls 

The value inside it refers 

to 

1 

txt_user 

Username 

2 

txt_pass 

Password 

3 

txt_con 

Confirming the password 


Notice: the password appears clearly in URL title/ address 
Change the value of Method to POST then repeat the previous steps. 



I " Attributes 

action 

reg.php 

| ^ method 

post: 
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Record your notes! 



- Have you noticed that the form data in URL address/ title (yes or No) 

- From all the previous which do you prefer using the value get or 

post. 

- For securing the password it is preferred to use the style Post instead of 
Get? Specify when you use the value get. 


39 














iring web" the computer 
photographic dictionary of terms ' 


r “ 


Discuss with your teacher and classmates the results of your discussion in 
points 



i j\ 


40 







The title: doing PHP code on the server to be sure of the correct 
inputs. 


The certainty of correct inputs by PHP code on the server, study the following 
parts of the code and discuss it with your classmates and teacher, 

Specify the purpose of every code in the following table and the difference 
between the code No. 2or 3 


Nol 

PHP code 

- 

<?php 

session startQ; 

7 > 

1 

<?php 

mcludef'coimectioii.php"'); 

if(isset($ POST ['Submitl'])} 

{ “ 

$txt_user=S_POST ['txtuser'] ; 

$txt_pass=$_POST[ l txt_pass 1 ]; 

) $txt_c on=S_P 0 S T ['txt_con']; 

mys ql_query ( 1 ' SET NAMES ’utfT); 

$query=mysql_query("msert into users values(’’,’$txt_user','$txt_pass 1 ) 11 ); 

_ ?> __ 
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Nol 

PHP code 

3 

<?php 

include ( 1 ’connection .php ; 
if(isset($ P 0 S T [' Submit 1' ])) 

' { 

Stxt_us er=S_P 0 S T ['txt_us er’ ] ; 

$txt_pass=$_POST [’txt_pass 1 ] ; 

$txtcon=$POST['txtcon']; 

if($txt user !="" && $txt_pass != 11 " && $txt_pass = $txt con) 

‘ f 

mysql_query("SET NAMES ’utfB'"); 

$query=mysql_query("insert into users values$txt_user'. ' $txt_pass l )"); 
if($ query) 

‘ { ’ 

| echo("<label id—Labell 1 style='color: #FF0000; font-size: kge;‘>^ *k/label>"}; 

' } 

else 

{ 

edio("<label id—Labell' style='color: #FF0000; font-size: larse;'>^Wl ^ j^</label>"); 

} 

} 

else 

{ 

echo "<iabel id—Labell 1 style='color: #FF0000,font-size: large;'> 

jiiilili jp jij jjp jtiji ^/ ’pbel 

} 

i 

?> 
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Code 2 

Code 3 




The purpose of every code: 


1 


2 


3 



The difference between both of code NO 2 or 3: 


i A 
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§ % Activity (4) 

V ■.’* -, 

Title: encrypting data 

Use your skills to search for electronic data information sources to get a code 
that explains the query MD5 for encrypting data. 

The task : 

Use the search engines through the internet to get to the code of encrypting 
data by using the function MD5 

1) Specify the opening words that's used, and register them in the following table. 

f -\ 

-The key words / word that's used to search for the code. 


V_/ 

2 ) What are the criteria in using the code and its sources? Discuss with the teacher 
and classmates. 


- The criteria of choosing the code and its source 




44 



























3) Fill in the following table with results of searching the web 


The programming code that 

the source of 

time and 

Comment briefly 

you have got 

getting it' 

date of 

and clarify the 


title* the 

getting the 

difference between 


website and 
its 

consequences 

code 

the code that you 
have studied and 
the code you have 
got. 


i j\ 
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Discuss with your teacher and classmates and record your notes and 
the discussion results. 



46 






Title: Doing code PHP and the results of the search on the internet. 


• If it is done for getting the following search when searching on the 
Google website about encrypting data. 


PHP md5() Function - W3Schools 

^ - ■ ■-.? www.w3schools.com/php/func_string_md5.asp 

The MD5 algorithm is intended for digital signature applications, where 
a large file must be "compressed" in a secure manner before being 

encrypted with a ... 

• By entering on this page, we get some codes and the results of doing it. 
First code: 


PHP Source: 

Result: 

<!DOCTYPE html> 

<html> 

<body> 

8bla9953c4611296a827abf8c47804d7 

< ?php 

$str = "Hello"; 
echo md5($str) ; 

?> 


</body> 

</html> 



i j\ 
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PHP Source: 

< ! DGCTYPE html> 

<html> 

<body> 

<?php 

$str = "Hello"; 

echo "The string: " . $str. "<&r>"; 

echo "TRUE - Raw 16 character binary format: 

”.md5{$str, TRUE) . "<br>"; 

echo "FALSE - 32 character hex number: 

”.mti5($str) . "<br>"; 

?> 


Result: 

The string: Hello 

TRUE - Raw 16 character binary format: <™SAa-"'« 0 Axx 
FALSE - 32 character hex number: 
8bla9953c4611296a827abf8c47804d7 


2 nd code: 


Study the two codes. Write your notes: 



48 






















iring web" the computer 
photographic dictionary of terms " 


\r ■ ~l 


Then discuss with your teacher and classmates the results of 
doing it: 
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Exercise 2 


Title: studying code, it is about registering a new user 


Required: 

Study the following code carefully. 

<?php 

include ( 1 ' coimection.php 1 ') ; 
mysql_queiy("SET NAMES ’utfT'); 


if(isset($_POST['submitr])) 

{ 

Suserc^S-POSTt'user']; 
$passw=S_POST [’pass']; 
$passw=md5( Spassw); 


1 


«-© 




.0 


if($usem !="" && Spassw !="") ‘ 

{ 

$sql="select * from users where username-$usem' && password= 'Spassw' 
$ query =mys ql_query($ s ql); 

$num=mysql_num_rows($query); 




if ($num = 1) 

{ 

$ro w=my s ql_fetch_arr ay ($ query); 
$_SESSION[ , usemame , ]=$row['usemame’]; 
header("Location: index.php"); 
exit; 

} 



?> 
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Explain briefly the following codes with numbers on the previous shape; 


No 

Explanation 

1 


2 


3 


4 


5 


6 


7 


8 


9 


10 
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<?php 

Susemame-’root"; 

$password=" N ; 

$database="term"; 

$server="localliost"; 

ScomecHnysqlcomectC'Sserver'V'Susemame'V'Spassword’'}; 
if (Sconnect) 

{ 

$select=mysql_select_db("$database") or die("^Wl ^ ‘dll. 

} 

else 

{ 

echof'^bUJI ije-lsj Jb-aiVI £j 

} 


j 
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Exercise (4) 

v_/ 

Title: searching for the types of writing password 
Under the supervision of your teacher do the following activity 

Use one of the browsers of the internet to search for the styles and types of 
writing strong password then write your notes 

1) Specify the opening words that you use record it in the following table: 

r 

(The guiding word / guiding words that you used in the search)' 


V_/ 


2) What are the criteria for the strong password? 



3-Types and properties of password 


i j\ 
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Write your notes and your own suggestions briefly and record the results of 
the discussion with friends. 
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